<template>
  <div class="peosonResultListBox main w" style="background-color:#fff">
    <p class="peosonResultTitle">评价系统 - 部门管理</p>
    <div class="block">
      <!-- 新增部门段 -->
      <div class="addBtnBox">
        <div class="item">
          <el-button type="success" @click="addState = true" icon="el-icon-plus">新增部门</el-button>
        </div>
      </div>
      <!-- 列表主体 -->
      <el-table
        :data="departmentList"
        border
        class="adminTimeTable"
        :header-cell-style="elementStyleObj"
      >
        <el-table-column type="index" label=" " width="60" header-align="center" align="center"></el-table-column>
        <el-table-column prop="name" label="部门名称" header-align="center" align="center"></el-table-column>
        <el-table-column
          prop="enable"
          label="是否启用"
          width="185"
          header-align="center"
          align="center"
        >
          <template slot-scope="scope">
            <template v-if="departmentList[scope.$index].enable == true">
              <i class="el-icon-check" style="color:#13ce66;font-size:28px;fontWeight: 600;"></i>
            </template>
            <template v-else>
              <i class="el-icon-minus" style="font-size:28px;fontWeight: 600;"></i>
            </template>
          </template>
        </el-table-column>
        <el-table-column
          prop="enable"
          label="是否参与评价"
          width="205"
          header-align="center"
          align="center"
        >
          <template slot-scope="scope">
            <template v-if="departmentList[scope.$index].isParticipation == true">
              <i class="el-icon-check" style="color:#13ce66;font-size:28px;fontWeight: 600;"></i>
            </template>
            <template v-else>
              <i class="el-icon-minus" style="font-size:28px;fontWeight: 600;"></i>
            </template>
          </template>
        </el-table-column>
        <el-table-column
          label="编 辑"
          filter-placement="bottom-end"
          width="185"
          header-align="center"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="showEditDepartment(scope.$index, scope.row)"
              icon="el-icon-edit"
            >编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 弹窗组件 -->
      <el-dialog title="新增部门" :visible.sync="addState" size="small" @close="closeDialog">
        <el-form
          :model="addForm"
          ref="addForm"
          :rules="rules"
          label-width="130px"
          v-loading="addLoading"
        >
          <el-form-item label="是否启用">
            <el-switch v-model="addForm.enable"></el-switch>
          </el-form-item>
          <el-form-item label="是否参与评价">
            <el-switch v-model="addForm.isParticipation"></el-switch>
          </el-form-item>
          <el-form-item v-show="addForm.isParticipation == true" label="部门名称" prop="name">
            <el-input v-model="addForm.name" placeholder="请输入部门名称"></el-input>
          </el-form-item>
          <el-form-item v-show="addForm.isParticipation == false" label="部门名称" prop="name">
            <el-select v-model="addForm.name" placeholder="请选择部门" @change="handleDeparentChange">
              <el-option
                v-for="item in systemDepartmentList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="排序" prop="sort">
            <el-input v-model="addForm.sort" placeholder="排序为 1 ~ 999 纯数字 , 数字越大排序越靠后"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="addState = false">取 消</el-button>
            <el-button @click="resetForm('addForm')">重置</el-button>
            <el-button type="primary" @click="addDepartment(addForm)">确 定</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      <el-dialog title="编辑部门" :visible.sync="editState" size="small" @close="closeDialog">
        <el-dialog width="30%" title="温馨提醒" :visible.sync="innerVisible" append-to-body>
          <div>
            <span
              style="line-height:24px;color:#F56C6C"
            >移除该部门参与评价 , 下次想要重新加入评价 , 要重新添加该部门的人员 . 请谨慎操作 !</span>
          </div>
          <!-- <el-button @click="innerVisible = false"></el-button> -->
        </el-dialog>
        <el-form
          ref="addForm"
          :model="addForm"
          :rules="rules"
          label-width="130px"
          v-loading="addLoading"
        >
          <el-form-item label="是否启用">
            <el-switch v-model="addForm.enable"></el-switch>
          </el-form-item>
          <el-form-item label="是否参与评价">
            <el-switch @change="handleInnerVisible" v-model="addForm.isParticipation"></el-switch>
          </el-form-item>
          <el-form-item label="部门名称" prop="name">
            <el-input v-model="addForm.name" placeholder="请输入部门名称"></el-input>
          </el-form-item>
          <!-- <el-form-item v-show="addForm.isParticipation == false" label="部门名称" prop="name" >
            <el-select v-model="addForm.name" 
            placeholder="请选择部门"
            @change="handleDeparentChange"
            >
              <el-option
                v-for="item in systemDepartmentList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>-->
          <el-form-item label="排序" prop="sort">
            <el-input v-model="addForm.sort" placeholder="排序为 1 ~ 999 纯数字 , 数字越大排序越靠后"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="cancelEditTime">取 消</el-button>
            <el-button type="primary" @click="editTime(addForm)">确 定</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>
<style scoped>
.el-switch__input:focus ~ .el-switch__core {
  outline: #fff solid 0px;
}
.adminTimeTable {
  font-family: "Microsoft" !important;
  width: 96%;
  margin: 10px 2% 50px;
  -webkit-box-shadow: 0px 6px 14px #e8e8e8;
  box-shadow: 0px 6px 14px #e8e8e8;
  cursor: pointer;
}
</style>
<script>
export default {
  name: "adminDepartment",
  data() {
    return {
      //element 表头样式
      elementStyleObj: {
        background: "rgb(245, 249, 255) ",
        fontSize: "18px",
        color: "#434343"
      },
      departmentList: [], //表格数据
      addState: false, //新增弹窗状态
      editState: false, //编辑弹窗
      addLoading: false, //懒加载
      innerVisible: false, //内弹窗
      addFormName: {
        name: "",
        id: ""
      }, //输入值
      systemDepartmentList: [], //对接学校系统部门列表
      // 新增
      addForm: {
        enable: false,
        depid: "",
        isParticipation: true,
        name: "",
        sort: "" //列表排序先后
      },
      // 表单验证
      rules: {
        name: [
          { required: true, message: "部门名称不能为空", trigger: "blur" }
        ],
        sort: [
          {
            required: true,
            message: "请输入排序 1 ~ 999,数字越大排序越靠后",
            trigger: "blur"
          }
        ]
      }
    };
  },
  created() {
    this.getDepartmentList();
    this.getSystemDepartmentList();
  },
  methods: {
    // 编辑部门内弹窗
    handleInnerVisible() {
      // 如果
      if (this.addForm.isParticipation == false) {
        this.innerVisible = true;
      }
    },
    // 显示编辑页面
    showEditDepartment(index, data) {
      this.editState = true; //打开编辑弹窗
      this.addForm = data; //页面
    },
    // 取消编辑页面
    cancelEditTime() {
      this.editState = false;
    },
    // 监听关闭弹窗时重新加载数据
    closeDialog() {
      this.getDepartmentList(); //重新加载列表
    },
    // 编辑完提交
    editTime() {
      this.$refs.addForm.validate(valid => {
        if (valid) {
          this.addLoading = true;
          const url = "api/management/department/update";
          this.$axios.post(url, this.addForm).then(response => {
            this.addLoading = false;
            if (response.data.code == 0) {
              this.$message({
                showClose: false,
                message: "修改成功!",
                type: "success",
                center: true, //文字居中
                duration: 1200
              });
              this.editState = false;
              this.getDepartmentList(); //重新加载列表
            } else {
              //失败
              this.$message({
                showClose: false,
                message: response.data.message,
                type: "error",
                center: true, //文字居中
                duration: 1200
              });
              return;
            }
          });
        } else {
          return false;
        }
      });
    },

    // 新增部门
    addDepartment(addForm) {
      this.$refs.addForm.validate(valid => {
        if (valid) {
          this.addLoading = true;
          // console.log("789", this.addForm);
          const url = "api/management/department/insert";
          this.$axios.post(url, this.addForm).then(response => {
            this.addLoading = false;
            if (response.data.code == 0) {
              this.$message({
                showClose: false,
                message: "添加成功",
                type: "success",
                center: true, //文字居中
                duration: 1200
              });
              this.addState = false;
              this.getDepartmentList(); //重新加载列表
            } else {
              //失败
              this.$message({
                showClose: false,
                message: response.data.message,
                type: "error",
                center: true, //文字居中
                duration: 1200
              });
              return;
            }
          });
        } else {
          return false;
        }
      });
    },
    //新增选择部门
    handleDeparentChange(id) {
      this.addForm.depid = id;
      this.addFormName = this.systemDepartmentList.find(item => {
        return item.id === id; //筛选出匹配数据
      });
      this.addForm.name = this.addFormName.name;
    },
    //新增时获取学校系统的部门列表
    getSystemDepartmentList() {
      const url = `api/management/department/systemDepartment`;
      //从后台获取到对象数组
      this.axios.post(url).then(response => {
        if (response.data != null) {
          this.systemDepartmentList = response.data;
          // console.log("学校系统总部门列表",this.systemDepartmentList);
        }
      });
    },
    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //获取集体评价部门列表
    getDepartmentList() {
      const url = `api/management/department/list`;
      this.axios.post(url).then(response => {
        if (response.data != null) {
          this.departmentList = response.data;
          // console.log("部门列表", this.departmentList);
        }
      });
    },
    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>
